<form method="post" action="#">
    <div class="span12">
        <h3>Ubah Password</h3>
        <div class="row">
            <div class="span2">Password Lama</div>
            <input type="password" name="password" id="txtPassword"/>
            <font class="strerr"><?= @$err->password ?></font>
        </div>
        <div class="row">
            <div class="span2">Password Baru</div>
            <input type="password" name="newpassword" id="txtNewpassword"/>
            <font class="strerr"><?= @$err->newpassword ?></font>
        </div>
        <div class="row">
            <div class="span2">Ulangi Password Baru</div>
            <input type="password" name="repassword" id="txtRepassword" onkeyup="checkPass(); return false;"/>
            <font class="strerr" id="confirmMessage"></font>
        </div>
        <input type="submit" class="btn btn-primary" value="Simpan" id="submit" disabled="true"/>
        <a class="btn btn-dark" href="<?= base_url() ?>profile">Batal</a>
    </div>
</div>
</form>

<script>
function checkPass()
{
    var pass1 = document.getElementById('txtNewpassword');
    var pass2 = document.getElementById('txtRepassword');
    var message = document.getElementById('confirmMessage');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match!"
        document.getElementById("submit").disabled = false;
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
        document.getElementById("submit").disabled = true;
    }
}  
</script>
   
